<!-- 技术支持 -->
<template>
	<view class="technology">
		
		<home :clickColorIndex="4"></home>
		<view class="menu-theme">
			<uni-breadcrumb separator=">">
				<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
					{{route.name}}
				</uni-breadcrumb-item>
			</uni-breadcrumb>
			<view class="menu-container">
				<!-- 左侧菜单 -->
				<!-- <view class="menu-sidebar"> -->
				<view class="menu-left">
					<!-- <view class="menu-title">
					订单中心
				</view> -->
					<view class="left-menu">
						<view v-for="(item, index) in menuItems" :key="index" :class="{ active: index == activeMenu }"
							@click="activeMenu = index">
							{{ item }}
						</view>
					</view>
				</view>
				<!-- </view> -->
				<!-- 右侧内容区（根据菜单切换显示） -->
				<view class="right-content">
					<!-- <view class="right-title">{{activeMenu===0?'视频教学':activeMenu===1?'定制加工':'资料下载'}}</view> -->
					<view class="right-title">{{activeMenu==0?'视频教学':'资料下载'}}</view>
					<view class="video-module" v-if="activeMenu==0">
						<view class="video-list">
							<view class="video-li" v-for="(item,index) in video" :key="index" @click="alertPlay(item)" style="cursor:pointer;">
								<view class="video-image">
									<image :src="item.image" mode="aspectFill"></image>
								</view>
								<view class="video-goods">
									<view class="video-name">{{item.title.slice(0, 50)}}</view>
									<view class="video-time"><uni-dateformat format="yyyy-mm-dd hh:mm" :date="item.create_date"></uni-dateformat></view>
									<view class="video-button">
										<label><uni-icons type="icon-bofang2" size="20" color="#fff"></uni-icons></label>
										<label>播放</label>
									</view>
								</view>
							</view>

						</view>
						<uni-pagination :total="videoTotal" :show-icon="true" @change="changePageVideo" />
					</view>

					<!-- 资料下载 -->
					<view v-if="activeMenu==1">
						<view class="page-container">
							<!-- 搜索区域 -->
							<view class="search-section">
								<input class="search-input" placeholder="请输入要搜索的内容" v-model="searchValue" />
								<button class="search-btn" @click="handleSearch">搜索</button>
							</view>

							<!-- 列表区域 -->
							<uni-list border="none" class="custom-list">
								<view class="custom-li" v-for="(item,index) in files" :key="index">
									<view class="custom-text">{{item.title.slice(0, 80)}}</view>
									<view class="custom-but">
										<button class="custom-download" @click="downloading(item.url,item.title)">下载</button>
									</view>
								</view>

							</uni-list>

							<!-- 分页组件 -->
							<uni-pagination style="margin-top:20px;" :total="fileTotal" :show-icon="true" @change="changePagefile" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<menu-tool></menu-tool>
		
		<uni-popup type="center" ref="playPopup">
			<view class="play-box left clearfix">
				<view class="play-title left clearfix">
					<view class="play-title-left left">
						{{currentItem.title}}
					</view>
					
					<view class="play-colse" @click="this.$refs.playPopup.close()">
						<uni-icons type="closeempty" size="25" color="#999"></uni-icons>
					</view>
				</view>
				
				<view class="play-content">
					<video :src="currentItem.url" autoplay style="width:100%;height:500px;border-radius: 5px;"></video>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var db = uniCloud.database();
	var global = uniCloud.importObject('global',{customUI:true});
	export default {
		name: "technology",
		data() {
			return {
				video:[],
				files:[],
				fileTotal:0,
				currentItem:null,
				videoTotal:0,//视频总数
				menuItems: ['视频教学', '资料下载'],
				activeMenu: 0, // 初始选中第一个菜单
				routes: [{ // 面包屑导航
						to: "/pages/technology/technology",
						name: "技术支持",
					},
					{
						to: "",
						name: "视频教学",
					}
				],

				// 资料下载

				searchValue: ''
			}
		},
		onLoad(e) {
			if(e && e.type){
				this.activeMenu = e.type;
			}
			
			
		},
		mounted() {
			var that = this;
			//查询出视频
			that.getVideo();
			//查询出资料下载
			that.getFiles();
		},
		methods: {
			//搜索文件
			handleSearch(){
				console.log(333333);
				var keyword = this.searchValue;
				if(!keyword){
					uni.showToast({
						title:'请输入关键词',
						icon:'none'
					})
					return false;
				}
				
				this.getFiles(1,keyword);
			},
			//文件改变分页以后
			changePagefile(e){
				var page = e.current;
				this.getFiles(page);
			},
			/**
			   * 文件下载并指定文件名
			   * @param {string} url - 文件下载地址
			   * @param {string} filename - 要保存的文件名（包含扩展名）
			   */
			  downloading(url, filename) {
				  var extend = this.getFileExtension(url);
				  filename = filename+'.'+extend;
			    // 创建XMLHttpRequest对象
				// url = 'https://mp-5a81006c-e233-49f0-8a6a-cb59bcd34a71.cdn.bspapp.com/cloudstorage/b4d896b5-0318-441b-ae28-c2af07cf94b3.pdf'
				// url ='https://mp-5a81006c-e233-49f0-8a6a-cb59bcd34a71.cdn.bspapp.com/cloudstorage/00783110-a00e-4a10-894b-381176eabc29.pdf'
				// url ='https://mp-5a81006c-e233-49f0-8a6a-cb59bcd34a71.cdn.bspapp.com/cloudstorage/4e04c7b8-c73b-46bf-ace8-02fc74e7c44b.pdf'
				console.log(url)
			    const xhr = new XMLHttpRequest();
			    xhr.open('GET', url, true);
			    xhr.responseType = 'blob';
			    
			    // 下载完成处理
			    xhr.onload = function() {
			      if (this.status === 200) {
			        // 创建blob对象
			        const blob = new Blob([this.response]);
			        
			        // 创建下载链接
			        const a = document.createElement('a');
			        const url = window.URL.createObjectURL(blob);
			        
			        a.href = url;
			        a.download = filename;
			        
			        // 模拟点击下载
			        document.body.appendChild(a);
			        a.click();
			        
			        // 清理资源
			        window.URL.revokeObjectURL(url);
			        document.body.removeChild(a);
			      } else {
			        console.error('文件下载失败，状态码：', this.status);
			        uni.showToast({
			          title: '下载失败',
			          icon: 'none'
			        });
			      }
			    };
			    
			    // 下载错误处理
			    xhr.onerror = function() {
			      console.error('下载请求发生错误');
			      uni.showToast({
			        title: '下载出错',
			        icon: 'none'
			      });
			    };
			    
			    // 发送请求
			    xhr.send();
			  },
			  getFileExtension(filename) {
			    // 检查文件名是否存在且包含点号
			    if (filename && filename.lastIndexOf('.') !== -1) {
			      // 从最后一个点号之后截取到末尾
			      return filename.slice(filename.lastIndexOf('.'));
			    }
			    // 没有后缀名时返回空字符串
			    return '';
			  },
			//弹出播放弹窗
			alertPlay(item){
				global.setVideoClickInc(item._id);
				this.currentItem = item;
				this.$refs.playPopup.open();
			},
			//点击视频分页以后
			changePageVideo(e){
				var page = e.current;
				this.getVideo(page);
			},
			//查询出视频内容
			getVideo(page = 1){
				var skip = (page - 1) * 10;
				var where = {
					is_show:true
				}
				uni.showLoading({
					title:'加载中'
				})
				db.collection('video').where(where).skip(skip).limit(10).orderBy('create_date desc').get({getCount:true}).then(res=>{
					uni.hideLoading();
					this.videoTotal = res.result.count;
					this.video = res.result.data;
				});
			},
			//查询出资料下载
			getFiles(page = 1,keyword=null){
				var skip = (page - 1) * 10;
				var where = {
					is_show:true
				}
				if(keyword){
					where.title =  { $regex: keyword, $options: 'i' };
				}
				uni.showLoading({
					title:'加载中'
				})
				db.collection('files').where(where).skip(skip).limit(10).orderBy('create_date desc').get({getCount:true}).then(res=>{
					uni.hideLoading();
					console.log('res',res);
					this.fileTotal = res.result.count;
					this.files = res.result.data;
				});
			},
			//点击页码按钮时触发
			changePage(){
				
			},
			handleDownload(item) {
				// 实现下载逻辑
				console.log('开始下载:', item.title)
			},
			handlePageChange(e) {
				this.currentPage = e.current
				console.log('切换到第', e.current, '页')
			}
		}
	}
</script>

<style scoped>
	.play-content{width:94%;height:500px;float:left;margin-left:3%;margin-top:20px;}
	.play-colse{float:right;margin-right:10px;cursor:pointer;}
	.play-title-left{width:60%;height:30px;overflow: hidden;line-height:30px;margin-left:10px;}
	.left{float:left;}
	.play-title{width:100%;height:30px;margin-top:10px;}
	.play-box{width:600px;height:600px;background:#fff;border-radius: 5px;}
	.video-button{float:left;width:70px;height:30px;line-height:26px;background:#2979ff;margin-top:30px;color:#fff;text-align: center;cursor:pointer;border-radius: 5px;font-size:14px;}
	.technology {
		width: 100%;
		min-height: 100%;
		background-color: #F5F5F5;
	}

	.menu-theme {
		display: flex;
		flex-direction: column;
		margin-left: 40px;
		width: 1400px;
		margin: 30px auto 0;
	}

	.uni-breadcrumb {
		margin-bottom: 20px;
		font-size: 18px;
	}

	.uni-breadcrumb-item {
		font-size: 15px;
	}

	/* 左侧菜单 */
	.menu-container {
		display: flex;
	}

	.menu-sidebar {
		width: 220px;
		height: 800px;
	}

	.menu-left {
		width: 220px;
		height: 770px;
		background: #FFF;
		border-radius: 10px;
		position: sticky;
		top: 90px;
	}

	.left-menu {
		width: 100%;
		padding: 20px 0;
		box-sizing: border-box;
		font-size: 18px;
		text-align: center;
	}

	.left-menu view {
		/* padding: 15px; */
		/* width: 100px; */
		width: 100%;
		/* height: 30px; */
		height: 60px;
		line-height: 60px;
		margin: 0 auto;
		/* margin-bottom: 10px; */
		/* border-radius: 15px; */
		cursor: pointer;
		transition: background 0.3s;
	}

	.left-menu .active {
		/* background: #f3a73f; */
		/* background: rgb(250, 240, 226); */
		/* border-right: 3px solid rgb(240, 209, 168); */
		color: #D92400;
		background-color: #FFEFE6;
		text-align: center;
		/* font-weight: bold; */
	}

	/* .menu-title {
		width: 100%;
		height: 50px;
		color: #fff;
		text-align: center;
		line-height: 50px;
		font-size: 18px;
		font-weight: bold;
		border-radius: 10px 10px 0 0;
		background-image: linear-gradient(to right, #e60012, #f3a73f);
	} */

	/* 右侧内容 */
	.right-content {
		width: 1200px;
		/* max-height: 2800px; */
		padding: 10px 20px;
		box-sizing: border-box;
		background: #fff;
		margin-left: 20px;
		border-radius: 10px;
	}

	.right-title {
		width: 1100px;
		height: 60px;
		line-height: 60px;
		margin: 10px auto;
		background-color: #EBEBEB;
		border-radius: 6px;
		padding: 0 30px;
		box-sizing: border-box;
	}

	.video-list {
		width: 1000px;
		height: 600px;
		/* background-color: #EBEBEB; */
		padding: 10px 30px;
		margin: 0 auto;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.video-li {
		width: 100%;
		height: 200px;
		display: flex;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
	}

	.video-image {
		width: 360px;
		height: 180px;
		padding: 8px;
		box-sizing: border-box;
		display: flex;
		/* background-color: #EBEBEB; */
	}

	.video-li image {
		width: 350px;
		height: 180px;
		margin: auto;
		object-fit: cover;
	}

	.video-goods {
		width: 640px;
		padding: 10px;
		box-sizing: content-box;
	}

	.video-name {
		font-size: 16px;
		color: #515A6E;
		margin-top: 20px;
	}

	.video-time {
		margin-top: 40px;
		font-size: 12px;
		color: #999999;
	}

	.video-module /deep/ .page--active {
		background-color: #D92400;
	}

	/* 资料下载 */


	/* 页面容器 */
	.page-container {
		padding: 15px;
		background-color: #fff;
	}

	/* 搜索区域样式 */
	.search-section {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.search-input {
		width: 200px;
		height: 36px;
		line-height: 36px;
		padding: 0 10px;
		border: 1px solid #ddd;
		border-radius: 4px 0 0 4px;
	}

	.search-btn {
		height: 38px;
		line-height: 38px;
		padding: 0 20px;
		background-color: #e60012;
		color: #fff;
		border: none;
		border-radius: 0 4px 4px 0;
		margin-left: 0;
	}

	/* 列表定制 */
	.custom-list {
		width: 100%;
		height: 530px;
		border: 1px solid #eee;
		border-radius: 4px;
		overflow-y: auto;
	}

	.custom-li {
		/* width: 98%; */
		height: 170px;
		padding: 10px;
		margin: 16px;
		box-sizing: border-box;
		/* background-color: #007aff; */
		border: 1px solid #E5E5E5;
	}

	.custom-text {
		width: 100%;
		height: 50px;
		line-height: 50px;
		background-color: #F5F5F5;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.custom-but {
		width: 200px;
		margin-top: 50px;
	}

	.custom-download {
		font-size: 14px;
		height: 40px;
		line-height: 40px;
	}




	/* 分页组件样式 */
	.custom-pagination {
		margin-top: 20px;
		justify-content: center;
	}

	.page-container /deep/ .page--active {
		background-color: #D92400;
	}

	.page-info {
		margin-right: 10px;
		color: #666;
	}
</style>